<!--人员管理首页-->
<template>
<div class="avue-crud">
  <basic-container>
    <p>人员概况</p>
    <div class="scale-box" :style="{width: '430px', height: '270px'}">
      <p class="scale-title">% 教职工人员比例</p>
      <el-divider></el-divider>
      <div id="teacher" :style="{width: 'auto', height: '120px'}"></div>
    </div>
    <div class="scale-box" :style="{width: '430px', height: '270px'}">
      <p class="scale-title">% 学生人员比例</p>
      <el-divider></el-divider>
      <div id="student" :style="{width: 'auto', height: '120px'}"></div>
    </div>
    <div class="scale-box" :style="{width: '430px', height: '270px'}">
      <p class="scale-title">% 走读住宿生比例</p>
      <el-divider></el-divider>
      <div id="resident" :style="{width: 'auto', height: '120px'}"></div>
    </div>
    <div class="scale-box" :style="{width: '430px', height: '270px'}">
      <p class="scale-title">% 其他(临时人员比例)</p>
      <el-divider></el-divider>
      <div id="other" :style="{width: 'auto', height: '120px'}"></div>
    </div>
  </basic-container>
</div>
</template>

<script>
import echarts from 'echarts'
export default {
name: "index",
  components: {
    echarts,
  },
  data () {
    return {
      charts: '',
      opinion:['男','女'],
      opinionData:[
        {value:335, name:'男'},
        {value:310, name:'女'},
      ]
    }
  },
  mounted(){
      this.drawPie('teacher')
      this.drawPie('student')
      this.drawPie('resident')
      this.drawPie('other')
  },
  methods: {
    drawPie(id){
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        color: ['#1890FF', '#F70707'], //环形图每块的颜色
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data:this.opinion,
          left:'150px',
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            radius:['50%','70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'blod'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:this.opinionData
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.scale-box{
  width: 430px;
  height: 270px;
  background: #ffffff;
  padding: 20px;
  display: inline-block;
}
.scale-title{
  font-size: 16px;
  color: #1890FF;
  font-weight: bold;
}
</style>